<template>
    <el-row>
      <el-col :span="24">
          <el-card class="search-form">
            <el-form ref="searchForm" class="el-form-col el-form-s" :model="search">
              <el-row :gutter="15">
                <el-col :span="6">
                  <el-form-item label="" prop="name">
                    <el-input v-model="search.name" placeholder="角色名称" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="text-center">
                  <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                </el-col>
                <!--<el-col :span="2" class="text-center">-->
                  <!--<el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>-->
                <!--</el-col>-->
                <el-col :span="2" class="text-center">
                  <el-button @click="resetFields" plain>重置</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
      </el-col>
      <el-col :span="24">
        <BasicTable
          ref="BasicTable"
          url="/ms-common-user/role/role-list"
          :tabs="tabs"
          :initParams="{projectType}"
          :columns="columns">
          <template slot="buttons">
            <el-button type="primary" @click.prevent="show(false)">新增</el-button>
          </template>
          <template slot="column">
            <el-table-column fixed="right" width="100px" align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="show(scope.row)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </template>
        </BasicTable>
      </el-col>
    </el-row>
</template>
<script>
import {copy} from '@/utils'
import {unixTimestampFilter} from '@/filters'
export default {
  name: 'roleIndex',
  data() {
    return {
      isOpen: false,
      searchLoading: false,
      tabs: [],
      search: {
        name: ''
      },
      searchOpen: false,
      projectType: process.env.projectType,
      columns: [
        {
          label: '角色名',
          data: 'name'
        },
        {
          label: '创建人',
          data: 'founderName'
        },
        {
          label: '创建时间',
          data: 'foundtime',
          render(data, type, full, meta) {
            return unixTimestampFilter(data)
          }
        }
      ]
    }
  },
  methods: {
    show(data) {
      if (data === false) {
        this.$router.push({path: '/ss-oms/information/role-show'})
      } else {
        this.$router.push({path: '/ss-oms/information/role-show/' + data.id})
      }
    },
    // 搜索
    searchFunc(search) {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let params = copy(search)
        this.searchLoading = true
        basicTable.search(params).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 表格刷新
    refresh() {
      this.searchFunc(this.search)
    }
  }
}
</script>
